<template>
 <s-layout
    navbar="user"
     tabbar="pages/index/user"
  >
      
      <view>
		  <view class="user_icon" @click="setFn">
			  <uni-icons type="gear-filled" color="#f8abbd" size="25"></uni-icons>
		  </view>
		  <view class="flex2 user_header">
		  	<view class="user_header_l">
		  		<!-- <image class="userImage" src="../../static/useravatar.png"></image> -->
		  		<image class="userImage" :src="appuserInfo.avatar"></image>
		  		<view v-if="tokenShow==true">
				    <view>{{appuserInfo.nickname}}</view>
		  			<view class="flex1" v-if="appuserInfo.szAgencyName">
		  				<image class="vipImage" src="../../static/vip.png" mode="widthFix"></image>
						<text class="vipImage_label">{{appuserInfo.szAgencyName}}</text>
		  			</view>
		  		</view>
				<view @click="loginFn"  class="pleaseLogin" v-if="tokenShow==false">请登录</view>
		  	</view>
		  <!-- 	<view class="flex1" @click="natTo('/pages/index/userInfo/updatelogin')">
		  		<view>个人中心</view>
		  		<uni-icons type="right" size="18"></uni-icons>
		  	</view> -->
			<view class="flex1  copy" v-if="tokenShow==true">
				<view class="code">邀请码</view>
				<view>{{appuserInfo.invitationCode}}</view>
				<image @click="copyFn(appuserInfo.invitationCode)"  class="copy_image" src="../../static/copy.png" mode="widthFix"></image>
			</view>
		  </view>
		  
		  <!-- 资产-->
		  <view class="property">
			  <view class="property_t">
				  <view class="flex2">
					  <view>总资产</view>
					  <view class="flex1" @click="isloginFn(0)">
						  <view>查看明细</view>
						  <uni-icons type="right"  color="#fff" size="15"></uni-icons>
					  </view>
				  </view>
				  <view class="property_money">{{appuserInfo.szWalletBalance}}</view>
				  <!-- <view>累计收益（元）{{appuserInfo.totalRevenue}}</view> -->
			  </view>
			  <view class="flex2 property_b">
				  <view>可提现（元）{{appuserInfo.szWithdrawalBalance}}</view>
				  <view class="flex" @click="drawFn">
					  <view>可提现余额明细</view>
					  <uni-icons type="right" size="15" color='#f8a6b8'></uni-icons>
				  </view>
				  <view class="flex1">
					 <!-- <view class="icon_button">提现</view>
					  <view class="icon">|</view>
					  <view class="icon_button" >充值</view>
					  <view class="icon">|</view> -->
					  <view @click="isloginFn(1)" class="icon_button">余额互转</view>
				  </view>
			  </view>
		  </view>
		
		  <!-- 数字直播 -->
		  <view class="broadcast">
			  <view class=" broadcast_t">
				<view class="flex2">
					<view class="broadcast_t_l">数字直播</view>
					<view class="broadcast_t_r">
						  <text>已直播</text>
						  <text class="broadcast_t_number">{{appuserInfo.openingTime}}</text>
						  <text>天</text>
					</view>
				</view>
				 <view class="flex2">
					  <view>
						  <view  style="margin-top: 20rpx;">
							  <text>当前可提现</text>
							  <text class="broadcast_money">{{appuserInfo.szWithdrawalBalance}}</text>
						  </view>
					  </view>
					 <view>
						<view class="flex1" style="margin-top: 20rpx;">
							 <view class="broadcast_t_add" @click="natTo('/pages/index/userInfo/widthdraw')" >提现</view>
							  <view  @click="isloginFn(2)" style="margin-left: 20rpx;" class="broadcast_t_add" >打赏</view>
						 </view>
						 <view style="margin-top: 20rpx;" class="flex1" @click="natTo('/pages/index/userInfo/drawlist')">
							 <view>提现记录</view>
							<uni-icons type="right" size="15" color='#fff'></uni-icons>
						 </view>
					 </view>
				 </view>
				 <view class="energy">
					 <view>
						 <text>当前能量值</text>
						 <text  class="broadcast_money">{{appuserInfo.szEnergy}}</text>
					 </view>
				
				 </view>
			  </view>
			  <view class="broadcast_b">
				 <view class="flex2">
					 <view>充值入驻</view>
					<!-- <view>
						 <text>当前余额</text>
						 <text>{{appuserInfo.userInfo.szWalletBalance}}(元)</text>
					 </view> -->
				 </view>
				 <pay  v-if="tokenShow==true" :balance="appuserInfo.szWalletBalance"></pay>
				<view class="recharge flex2" v-if="tokenShow==false" @click="isloginFn(3)">
					 <view class="flex1">
						 <image class="recharge_jinbi" mode="widthFix" src="../../static/jinbi.png"></image>
						 <view>10000元(支付宝)</view>
					 </view>
					 <uni-icons type="right"  color="#fff" size="15"></uni-icons>
				 </view>
				<!-- <view class="recharge flex2"  v-if="tokenShow==false" >
					 <view class="flex1">
						 <image class="recharge_jinbi" mode="widthFix" src="../../static/jinbi.png"></image>
						 <view>10000元(余额支付)</view>
					 </view>
					 <uni-icons type="right"  color="#fff" size="15"></uni-icons>
				 </view> -->
				 <view @click="purchaseFn" class="flex1" v-if="tokenShow==true">
					 <view>充值记录</view>
					 <uni-icons type="right"  color="#f15d7a"  size="15"></uni-icons>
				 </view>
				 <view class="user_Information" >
					 <view style="margin-bottom: 15rpx;">用户须知</view>
					 <view>1.充值可在该平台直播和带货</view>
					 <view>2.下单前请先开启“手机账号登录”,否则会充值失败</view>
					 <view>3.数字直播返现的余额仅限在该平台消费</view>
				 </view>
			  </view>
		  </view>
		  
		 
		  <view class="list" v-if="tokenShow==true">
			  <!-- 我的下一级 -->
			  <view class="list_item" @click="subordinateFn">
				  <view  >我的团队</view>
				  <uni-icons type="right" size="18"></uni-icons>
			  </view>
			<!--  <view  class="list_item" @click="natTo('/pages/index/userInfo/updatelogin')">
				  <view  >修改密码</view>
				  <uni-icons type="right" size="18"></uni-icons>
			  </view> -->
		  </view>
		
		  <view @click="delteFn" v-if="tokenShow==true" class="recharge">退出登录</view>
          <!-- #ifdef APP -->
            <!-- <pay></pay> -->
          <!-- #endif -->	
	  </view>
	  <uni-popup ref="popup" type="center"  > 
	       <view class="popup">
			   <view class="popup_label">  当前检测到没有设置支付密码,请设置支付密码</view>
			   <view  class="flex1 popup_button"> 
			      <view class="popup_button_item" @click="delPopupFn">取消</view>
			      <view class="popup_button_item" @click="setPayFn">设置</view>
			   </view>
		   </view>
	  </uni-popup>
	  
	
		
   
  </s-layout>
  
</template>

<script setup>
  import { computed ,ref,reactive,toRefs,onMounted} from 'vue';
  import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import pay from '@/pages/index/pay'
 
  
  // #ifdef APP
	 const module = uni.requireNativePlugin('SandPayTypeModule')
  // #endif
  // 隐藏原生tabBar
  uni.hideTabBar();
  const appuserInfo=ref({});
  
  const tokenShow=ref(false)

  const paypassword=ref()

  const popup = ref(null);
  
  
 
  onLoad(()=>{
	  console.log('app',sheep.$store('user').userInfo);
	  // appuserInfo.value=sheep.$store('user').userInfo
	  // console.log(appuserInfo.value);
  })
  
  onShow(()=>{
	  if(uni.getStorageSync('token') ){
		 //  // appuserInfo.value=uni.getStorageSync('appuserInfo')
		   appuserInfo.value=sheep.$store('user').userInfo
		   tokenShow.value=true
		   console.log(appuserInfo.value);
		  
		  isPayPassword({userId:appuserInfo.value.id})
	  }else{
		   appuserInfo.value=sheep.$store('user').userInfo
		    tokenShow.value=false
	  }
	  
  })
  // 下拉刷新
  onPullDownRefresh(() => {
     sheep.$store('user').getUserInfo()
  	setTimeout(function() {
  		uni.stopPullDownRefresh();
  	}, 800);
  });
  
  
  //点击赋值uni.setClipboardData
  const copyFn=(item)=>{
	  uni.setClipboardData({
		  data:item,
		  success(res) {
		  	console.log(res);
		  }
	  })
  }
  
  //判断是否登录
  const isloginFn=(item)=>{
	  console.log(item);
	  if( tokenShow.value==false){
		  uni.navigateTo({
		  	url:'/pages/index/loginpassword'
		  })
	  }else{
		  
		  if(item==0){
			   banlaceFn() //查看明细
		  }else if(item==1){
			  hedgingFn()//余额互转
		  }else {
			    popupFn()//打赏
		  }
		 
	  }
  }
  
  const isPayPassword=(item)=>{
	  console.log('ispay');
	  sheep.$api.login.payPassword(item).then(res=>{
		  console.log(res);
		  paypassword.value=res.rows[0].paymentPassword
	  })
  }
  
  const popupFn=()=>{
	  if(paypassword.value !=='未设置'){
		  console.log('有密码');
		  uni.navigateTo({
		  	url:"/pages/index/reward"
		  })
	  }else{
		  popup.value.open()
	  }
  }
  //取消popup弹框
  const delPopupFn=()=>{
	   popup.value.close()
  }
  const setPayFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/updatepaypassword'
	  })
	  delPopupFn()
  }
  
  const natTo=(url)=>{
	  uni.navigateTo({
	  	url:url
	  })
  }
  
  const banlaceFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/balancelist'
	  })
  }
  
  //跳转我的下级 pages/index/subordinate
  const subordinateFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/subordinate'
	  })
  }
  const setFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/userInfo/index'
	  })
  }
  
  
  //跳转充值记录
  const purchaseFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/rechargeRecord'
	  })
  }
  
  //跳转登录页面
  const loginFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/loginpassword'
	  })
  }
  
  //跳转可提现
  const drawFn=()=>{
	  uni.navigateTo({
	  	url:'/pages/index/drawalBalance'
	  })
  }
  
  //跳转对冲
  const  hedgingFn=()=>{
	  if(paypassword.value !=='未设置'){
	  		  console.log('有密码');
	  		 uni.navigateTo({
	  		 	url:'/pages/index/hedging'
	  		 })
	  }else{
	  		  popup.value.open()
	  }
	 
  }

  
 const delteFn=()=>{
		  console.log('delete');
		  uni.removeStorageSync('token')
		  sheep.$store('user').logout()
		  uni.reLaunch({
		  	url:"/pages/index/newuser"
		  })
 }
 

  
  
</script>

<style lang="scss" scoped>
	.flex1{
		display: flex;
		align-items: center;
	}
	.flex2{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.vipImage_label{
		font-size: 24rpx;
		
	}
	.copy{
		color: #dcdcdc;
		.code{
			margin-right: 10rpx;
		}
	}
	.copy_image{
		width: 30rpx;
		margin: 0 20rpx;
	}
	//请登录
	.pleaseLogin{
		font-size: 38rpx;
		font-weight: 700;
		color: #bbbbbb;
	}
	.user_icon{
		display:flex;
		justify-content: flex-end;
		margin-right: 50rpx;
		padding-top:200rpx;
	}
	.user_header{
	  
	   // padding-top:200rpx;
	   padding-left: 30rpx;
	   padding-right:30rpx;
	}
		
	.user_header_l{
		display: flex;
		align-items: center;
	}
	.userImage{
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.vipImage{
		width: 28rpx;
		margin-top: 10rpx;
	}
	.icon_button{
		font-size: 24rpx;
		padding:8rpx 12rpx ;
		border-radius: 15rpx;
		border: 2rpx solid #f9b9c9;
		color: #f8b1c2;
	}
	//资产
	.property{
		margin: 50rpx 30rpx 30rpx 30rpx;
		border-radius: 30rpx;
		box-shadow: 0 0 20rpx 20rpx #f1e2e9;
	  
		.property_t{
			color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			background-image: linear-gradient(90deg,#f892a9,#f8a3b6,#f8b7c7,#f8c9d5,#f8d2db);
			
			.property_money{
				font-size: 36rpx;
				font-weight: 700;
				margin: 25rpx 0;
			}
		}
		
		.property_b{
			padding: 30rpx;
			color:#ff658b;
			font-weight: 700;
			border-radius:  0 0 30rpx 30rpx;
			background-color: #fff;
			.icon{
				margin: 0 10rpx;
			}
		}
	}
	
	//数字直播
	.broadcast{
		margin: 30rpx 30rpx 30rpx 30rpx;
		border-radius: 30rpx;
		box-shadow: 0 0 30rpx 30rpx #f1e2e9;
		
		.broadcast_t{
			color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			
			background-image: linear-gradient(90deg,#f892a9,#f8a3b6,#f8b7c7,#f8c9d5,#f8d2db);
			.broadcast_t_l{
				font-size: 30rpx;
				font-weight: 700;
			}
			.broadcast_t_r{
				font-size: 24rpx;
				.broadcast_t_number{
					color: #f08c9f;
					font-size: 30rpx;
					font-weight: 700;
					margin: 0 10rpx;
				}
			}
			.broadcast_t_add{
				padding: 8rpx 20rpx;
				font-size: 24rpx;
				color: #eb5f7a;
				border-radius: 15rpx;
				background-color: #fff;
			}
			.broadcast_money{
				font-size: 32rpx;
				font-weight: 700;
				color:#ed5b77 ;
				margin-left: 20rpx;
			}
			
		}
		.broadcast_b{
			padding: 30rpx;
			color:#ff658b;
			font-weight: 700;
			border-radius:  0 0 30rpx 30rpx;
			background-color: #fff;
			
			
			.recharge{
				color: #fff;
				padding: 30rpx;
				margin-top: 30rpx;
			    border-radius: 30rpx;
				background-image: linear-gradient(90deg,#ea3e5e,#ec4665,#f15c79,#f8768f,#fe8ca2);
				
				.recharge_jinbi{
					width: 30rpx;
					margin-right: 20rpx;
				}
			}
			
			.user_Information{
				color: #6f6f6f;
				font-size: 24rpx;
				margin-top: 40rpx;
				line-height: 45rpx;
			}
		}
	}
	.recharge{
		color: #fff;
		padding: 30rpx;
		margin: 30rpx 10rpx;
		text-align: center;
	    border-radius: 30rpx;
		background-image: linear-gradient(90deg,#ea3e5e,#ec4665,#f15c79,#f8768f,#fe8ca2);
		
	
	}
	.energy{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	
	//检查是否设置支付密码
	.popup{
		width: 500rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top:40rpx ;
		.popup_label{
			text-indent:1.5em;
			padding:0 30rpx ;
		}
		.popup_button{
			margin-top: 20rpx;
			border-top: 2rpx solid #eee;
			.popup_button_item{
				width:50%;
				text-align: center;
				padding: 20rpx 0;
			}
			.popup_button_item:first-child{
				border-right: 2rpx solid #eee;
			}
			.popup_button_item:last-child{
				color:#f8b2c3;
			}
		}
	}
	
	.list{
		background-color: #fff;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 15rpx;
	}
	.list_item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20rpx 0;
	}
</style>
